// 苹果风格字体系统
// 参考 Apple.com 的字体设计

// 字体栈定义
$font-family-base: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
  'Helvetica Neue', 'Helvetica', 'Arial', 'PingFang SC', 'Hiragino Sans GB',
  'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;

$font-family-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
  'Helvetica Neue', 'Helvetica', 'Arial', 'PingFang SC', 'Hiragino Sans GB',
  'Microsoft YaHei', sans-serif;

$font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code',
  'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', monospace;

// 字体大小 - 苹果风格的尺寸系统
$font-size-xs: 12px;      // 小号文字
$font-size-sm: 14px;      // 正文小号
$font-size-base: 17px;    // 正文基础（苹果标准）
$font-size-lg: 21px;      // 大号文字
$font-size-xl: 28px;      // 标题小号
$font-size-2xl: 40px;     // 标题中号
$font-size-3xl: 56px;     // 标题大号
$font-size-4xl: 80px;     // 超大标题

// 字重 - 苹果使用的字重
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;

// 行高 - 苹果的行高系统
$line-height-tight: 1.2;
$line-height-normal: 1.47059;  // 苹果标准行高
$line-height-relaxed: 1.6;
$line-height-loose: 1.8;

// 字间距
$letter-spacing-tight: -0.022em;
$letter-spacing-normal: 0;
$letter-spacing-wide: 0.011em;

// 应用全局字体
:root {
  font-family: $font-family-base;
  font-size: $font-size-base;
  line-height: $line-height-normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1;
}

// 标题样式 - 苹果风格
.typography {
  // 超大标题
  &-display-1 {
    font-family: $font-family-display;
    font-size: $font-size-4xl;
    font-weight: $font-weight-bold;
    line-height: $line-height-tight;
    letter-spacing: $letter-spacing-tight;
  }

  // 大标题
  &-display-2 {
    font-family: $font-family-display;
    font-size: $font-size-3xl;
    font-weight: $font-weight-semibold;
    line-height: $line-height-tight;
    letter-spacing: $letter-spacing-tight;
  }

  // 中标题
  &-display-3 {
    font-family: $font-family-display;
    font-size: $font-size-2xl;
    font-weight: $font-weight-semibold;
    line-height: 1.1;
    letter-spacing: $letter-spacing-tight;
  }

  // H1
  &-h1 {
    font-family: $font-family-display;
    font-size: $font-size-xl;
    font-weight: $font-weight-semibold;
    line-height: 1.14286;
    letter-spacing: $letter-spacing-tight;
  }

  // H2
  &-h2 {
    font-family: $font-family-display;
    font-size: $font-size-lg;
    font-weight: $font-weight-semibold;
    line-height: 1.19048;
    letter-spacing: $letter-spacing-normal;
  }

  // H3
  &-h3 {
    font-family: $font-family-base;
    font-size: $font-size-base;
    font-weight: $font-weight-semibold;
    line-height: 1.23529;
    letter-spacing: $letter-spacing-normal;
  }

  // 正文大号
  &-body-lg {
    font-family: $font-family-base;
    font-size: $font-size-lg;
    font-weight: $font-weight-normal;
    line-height: $line-height-normal;
    letter-spacing: $letter-spacing-normal;
  }

  // 正文标准
  &-body {
    font-family: $font-family-base;
    font-size: $font-size-base;
    font-weight: $font-weight-normal;
    line-height: $line-height-normal;
    letter-spacing: $letter-spacing-normal;
  }

  // 正文小号
  &-body-sm {
    font-family: $font-family-base;
    font-size: $font-size-sm;
    font-weight: $font-weight-normal;
    line-height: 1.42857;
    letter-spacing: $letter-spacing-normal;
  }

  // 辅助文字
  &-caption {
    font-family: $font-family-base;
    font-size: $font-size-xs;
    font-weight: $font-weight-normal;
    line-height: 1.33333;
    letter-spacing: $letter-spacing-normal;
  }

  // 代码
  &-code {
    font-family: $font-family-mono;
    font-size: 0.875em;
    font-weight: $font-weight-normal;
    line-height: 1.5;
  }
}

// 标准 HTML 标签样式
h1, .h1 {
  @extend .typography-h1;
  margin: 0 0 0.5em;
}

h2, .h2 {
  @extend .typography-h2;
  margin: 0 0 0.5em;
}

h3, .h3 {
  @extend .typography-h3;
  margin: 0 0 0.5em;
}

p {
  @extend .typography-body;
  margin: 0 0 1em;
}

small {
  @extend .typography-caption;
}

code {
  @extend .typography-code;
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

// 工具类
.text-display-1 { @extend .typography-display-1; }
.text-display-2 { @extend .typography-display-2; }
.text-display-3 { @extend .typography-display-3; }
.text-h1 { @extend .typography-h1; }
.text-h2 { @extend .typography-h2; }
.text-h3 { @extend .typography-h3; }
.text-body-lg { @extend .typography-body-lg; }
.text-body { @extend .typography-body; }
.text-body-sm { @extend .typography-body-sm; }
.text-caption { @extend .typography-caption; }

// 字重工具类
.font-light { font-weight: $font-weight-light; }
.font-normal { font-weight: $font-weight-normal; }
.font-medium { font-weight: $font-weight-medium; }
.font-semibold { font-weight: $font-weight-semibold; }
.font-bold { font-weight: $font-weight-bold; }

// 颜色工具类（苹果风格）
.text-primary { color: #1d1d1f; }
.text-secondary { color: #6e6e73; }
.text-tertiary { color: #86868b; }
.text-link { color: #0066cc; }
.text-white { color: #ffffff; }

// 响应式字体大小
@media (max-width: 1068px) {
  .typography-display-1 { font-size: 64px; }
  .typography-display-2 { font-size: 48px; }
  .typography-display-3 { font-size: 32px; }
  .typography-h1 { font-size: 24px; }
}

@media (max-width: 734px) {
  .typography-display-1 { font-size: 48px; }
  .typography-display-2 { font-size: 40px; }
  .typography-display-3 { font-size: 28px; }
  .typography-h1 { font-size: 21px; }
  .typography-body { font-size: 14px; }
}
